<template>
  <div class="div">
    <div>:isAnimation="false"</div>
    <hf-progress :percentage="percent" type="line" :isAnimation="false" />
  </div>
  <div class="div">
    <div>:isAnimation="true"</div>
    <hf-progress :percentage="percent" type="line" :isAnimation="true" />
  </div>
  <div class="div">
    <div>:time="5000"</div>
    <hf-progress :percentage="percent" type="line" :isAnimation="true" :time="5000" />
  </div>
  <div class="div">
    <div>:time=10000"</div>
    <hf-progress :percentage="percent" type="line" :isAnimation="true" :time="10000" />
  </div>
  <div class="div">
    <div>:isAnimation="false"</div>
    <hf-progress :percentage="percent" type="circle" class="circle" />
    <!-- <hf-progress :percentage="percent" type="circle" :stroke-width="1000" :isAnimation="false" /> -->
  </div>
  <div class="div">
    <div>:time=10000"</div>
    <hf-progress :percentage="percent" type="circle" :isAnimation="true" :time="10000" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

let percent = ref(50)
onMounted(() => {
  let timer = setInterval(() => {
    percent.value += 10
    if (percent.value >= 100) {
      clearInterval(timer) // 停止
    }
  }, 15000)
})
</script>

<style scoped lang="scss">
.div {
  font-size: 14px;
  margin-bottom: 10px;
}
</style>
